<template>
  <div class="bg-gray-50 text-gray-800 min-h-screen">
    <!-- 顶部导航栏 -->
    <header class="bg-gradient-to-r from-teal-800 to-teal-900 text-white shadow-md">
      <div class="container mx-auto px-4">
        <!-- 一级导航 -->
        <div class="flex justify-between items-center py-3">
          <div class="flex items-center">
            <div class="text-xl font-['Pacifico'] mr-8">logo</div>
            <div class="hidden md:flex space-x-6">
              <a href="#" class="text-white hover:text-teal-200">职位</a>
            </div>
          </div>
          <div class="flex items-center space-x-4">
            <router-link to="/communication" class="text-white hover:text-teal-200">消息</router-link>
            <router-link to="/resume" class="text-white hover:text-teal-200">简历</router-link>
            <a href="#" class="text-white hover:text-teal-200" @click="toggleFavorites">收藏</a>
            <div class="flex items-center">
              <span>{{ authStore.user?.name }}</span>
              <div class="w-8 h-8 ml-2 rounded-full bg-white overflow-hidden">
                <img :src="authStore.user?.avatar" :alt="authStore.user?.name" class="w-full h-full object-cover">
              </div>
            </div>
          </div>
        </div>
        
        <!-- 二级导航 -->
        <div class="flex justify-between items-center py-3">
          <div class="flex items-center space-x-4 gap-4">
            <button 
              v-for="category in categories" 
              :key="category"
              @click="activeCategory = category"
              :class="[
                'hover:text-teal-200',
                activeCategory === category ? 'text-teal-200 border-b-2 border-teal-200 pb-1' : 'text-white'
              ]"
            >
              {{ category }}
            </button>
            <button 
              @click="showAddCategory = true"
              class="w-6 h-6 flex items-center justify-center bg-teal-700 rounded text-white hover:bg-teal-800 transition-colors"
            >
              <i class="ri-add-line"></i>
            </button>
          </div>
          <div class="relative">
            <div class="flex items-center bg-white rounded-full overflow-hidden pr-2">
              <input 
                v-model="searchQuery"
                type="text" 
                placeholder="搜索职位、公司" 
                class="py-2 px-4 w-64 border-none text-gray-800 focus:outline-none"
              >
              <button class="w-8 h-8 flex items-center justify-center text-gray-500">
                <i class="ri-search-line"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
    </header>

    <!-- 筛选条件 -->
    <div class="bg-white border-b shadow-sm">
      <div class="container mx-auto px-4 py-4">
        <div class="flex items-center flex-wrap gap-8 text-sm">
          <div class="flex items-center px-3 py-1.5 bg-blue-50 text-blue-600 rounded-full">
            <i class="ri-map-pin-line mr-1.5"></i>
            <span>上海</span>
            <i class="ri-close-line ml-1.5 cursor-pointer hover:text-blue-700"></i>
          </div>
          
          <FilterDropdown 
            v-for="filter in filterOptions"
            :key="filter.key"
            :label="filter.label"
            :options="filter.options"
            @select="handleFilterSelect(filter.key, $event)"
          />
          
          <button @click="resetFilters" class="flex items-center text-gray-400 hover:text-blue-600 transition-colors duration-200">
            <i class="ri-refresh-line mr-1"></i>
            <span>重置</span>
          </button>
        </div>
      </div>
    </div>

    <!-- 主体内容 -->
    <main class="container mx-auto px-4 py-6 flex">
      <!-- 左侧职位列表 -->
      <div class="job-list-container w-[450px] mr-6 flex-shrink-0">
        <JobCard 
          v-for="job in filteredJobs" 
          :key="job.id"
          :job="job"
          :active="selectedJobId === job.id"
          @click="selectJob(job.id)"
        />
      </div>
      
      <!-- 右侧职位详情 -->
      <div class="flex-1 bg-white rounded-lg shadow-sm p-6 border border-gray-100">
        <JobDetail v-if="selectedJob" :job="selectedJob" />
        <div v-else class="text-center text-gray-500 py-20">
          请选择一个职位查看详情
        </div>
      </div>
    </main>

    <!-- 添加分类模态框 -->
    <AddCategoryModal 
      v-if="showAddCategory"
      @close="showAddCategory = false"
      @add="addCategory"
    />

    <!-- 收藏模态框 -->
    <FavoritesModal 
      v-if="showFavorites"
      @close="showFavorites = false"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { useAuthStore } from '../stores/auth'
import { useJobsStore } from '../stores/jobs'
import JobCard from '../components/JobCard.vue'
import JobDetail from '../components/JobDetail.vue'
import FilterDropdown from '../components/FilterDropdown.vue'
import AddCategoryModal from '../components/AddCategoryModal.vue'
import FavoritesModal from '../components/FavoritesModal.vue'

const authStore = useAuthStore()
const jobsStore = useJobsStore()

const categories = ref(['推荐', '联合创始人', '副总裁/副总经理', '高级产品管理'])
const activeCategory = ref('推荐')
const selectedJobId = ref<string | null>(null)
const showAddCategory = ref(false)
const showFavorites = ref(false)
const searchQuery = ref('')

const filterOptions = [
  {
    key: 'jobStatus',
    label: '求职状态',
    options: ['离职-随时到岗', '在职-月内到岗', '在职-考虑机会', '在职-暂不考虑']
  },
  {
    key: 'salary',
    label: '薪资待遇',
    options: ['3k以下', '3-5k', '5-10k', '10-20k', '20-50k', '50k以上']
  },
  {
    key: 'experience',
    label: '工作经验',
    options: ['应届生', '1年以内', '1-3年', '3-5年', '5-10年', '10年以上']
  },
  {
    key: 'education',
    label: '学历要求',
    options: ['高中', '大专', '本科', '硕士', '博士']
  },
  {
    key: 'industry',
    label: '行业类型',
    options: ['互联网', '金融', '教育', '医疗健康', '房地产', '制造业']
  },
  {
    key: 'companySize',
    label: '企业规模',
    options: ['0-20人', '20-99人', '100-499人', '500-999人', '1000-9999人', '10000人以上']
  }
]

const filteredJobs = computed(() => jobsStore.filteredJobs)
const selectedJob = computed(() => 
  selectedJobId.value ? jobsStore.jobs.find(job => job.id === selectedJobId.value) : null
)

watch(searchQuery, (newQuery) => {
  jobsStore.setSearchQuery(newQuery)
})

const selectJob = (jobId: string) => {
  selectedJobId.value = jobId
}

const handleFilterSelect = (filterKey: string, value: string) => {
  // Handle filter selection logic
  console.log('Filter selected:', filterKey, value)
}

const resetFilters = () => {
  jobsStore.setFilters({})
  searchQuery.value = ''
}

const addCategory = (categoryName: string) => {
  categories.value.push(categoryName)
  showAddCategory.value = false
}

const toggleFavorites = () => {
  showFavorites.value = !showFavorites.value
}

// Select first job by default
const selectFirstJob = () => {
  if (filteredJobs.value.length > 0) {
    selectedJobId.value = filteredJobs.value[0].id
  }
}

selectFirstJob()
</script>
